<template>
  <div class="product-collect-list-area">
    <div class="top-fixed">
      <van-nav-bar
        title="产品"
        size="18"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <div class="op-area">
        <div class="op-left">
          <div class="set-lf" @click="handleShowSearch">
            <span
              >排序<span
                class="icon iconfont"
                style="color: #999; font-size: 12px"
                >&#xe617;</span
              ></span
            >
          </div>
        </div>
        <div class="op-right">
          <div class="set-lf" @click="handleShowPop">
            <span
              >筛选<span
                class="icon iconfont"
                style="color: #999; font-size: 12px; margin-left: 2px"
                >&#xe61e;</span
              ></span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多啦"
          @load="load_more"
          class="publist"
        >
          <ul v-if="list && list.length" class="list-con">
            <li v-for="item in list" :key="item.id">
              <div class="list-item">
                <p class="test-title" @click="goDetail($event, item)">
                  <span class="cate">{{ item.name }}</span>
                </p>
                <div class="img-txt-area">
                  <div class="thumb">
                    <img src="../assets/image/shoppingCart/exp.png" />
                  </div>
                  <div class="text-con">
                    <p class="type">
                      <span class="t-lf">产品编号：</span
                      ><span class="t-rt">{{ item.productId }}</span>
                    </p>
                    <p class="price">
                      <span class="t-lf">产品单价：</span
                      ><em class="t-rt">¥{{ item.salePrice }}</em>
                    </p>
                  </div>
                </div>
                <van-divider />
                <div class="bottom-info-area">
                  <p class="list-sort">
                    <span v-if="item.categoryFIdText"
                      >{{ item.categoryFIdText }} -&nbsp;</span
                    ><span v-if="item.categorySIdText"
                      >{{ item.categorySIdText }} -&nbsp;</span
                    ><span v-if="item.categoryTIdText">{{
                      item.categoryTIdText
                    }}</span>
                  </p>
                  <span class="add-cart-btn" @click="goBuy"
                    ><img src="../assets/image/productList/addCart_btn.png"
                  /></span>
                </div>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
    <!-- 筛选 -->
    <van-popup
      v-model="showSecPop"
      round
      closeable
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="pop-tit"><i></i><span class="tit">筛选</span></div>
      <div class="input-style-form" style="height: 700px; overflow: auto">
        <div class="pop-content">
          <div class="inner-form-area">
            <form>
              <div class="form-item">
                <p class="label-ft">产品编号</p>
                <input
                  type="text"
                  v-model="queryParams.productId"
                  class="label-input"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <p class="label-ft">产品名称</p>
                <input
                  type="text"
                  v-model="queryParams.name"
                  class="label-input"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <p class="label-ft">产品分类</p>
                <van-field
                  v-model="fieldValue"
                  right-icon="arrow-down"
                  readonly
                  placeholder="请选择"
                  @click="show = true"
                  style="width: 324px; overflow: hidden"
                />
                <van-popup v-model="show" round position="bottom">
                  <van-cascader
                    v-model="cascaderValue"
                    title="请选择分类"
                    :options="categoryList"
                    :field-names="fieldNames"
                    @close="show = false"
                    @change="handleSecSort"
                    @finish="onFinish"
                  />
                </van-popup>
              </div>
              <div class="form-item">
                <p class="label-ft">是否有效</p>
                <SingleSec
                  :data="dict_datas.product_spu_status"
                  @selected-tag="handleSelectedValid"
                ></SingleSec>
              </div>
              <div class="form-item">
                <p class="label-ft">是否试用</p>
                <SingleSec
                  :data="freeOptions"
                  @selected-tag="handleSelectedFree"
                ></SingleSec>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="btm-area">
        <span class="btn-reset" @click="resetQuery">重置</span>
        <span class="btn-confirm" @click="handleSearch">确定</span>
      </div>
    </van-popup>
    <!-- 排序 -->
    <searchPopup
      v-model="showSearchPop"
      @close-pop="clickOverlay"
      @set-sort="handleSetSort"
    ></searchPopup>
    <!-- 排序 end -->
  </div>
</template>

<script>
import SearchPopup from "../comp/searchPopup";
import SingleSec from "../comp/singleSec.vue";
import { getSpuPage } from "@/api/product/spu";
import { categoryTreeSelect } from "@/api/product/category";
import { mapGetters } from "vuex";
export default {
  name: "ProductList",
  computed: {
    ...mapGetters(["dict_datas", "getDictLabel"]),
  },
  components: {
    SearchPopup,
    SingleSec,
  },
  data() {
    return {
      show: false,
      mgFlag: true,
      showSearchPop: false,
      showSecPop: false,
      loading: false,
      finished: false,
      fieldValue: "",
      cascaderValue: "",
      categoryList: [],
      fieldNames: {
        text: "label",
        value: "id",
        children: "children",
      },
      freeOptions: [
        {
          value: true,
          label: "是",
        },
        {
          value: false,
          label: "否",
        },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 0,
        pageSize: 10,
        isAsc: false,
        columns: "createTime",
        name: null,
        categoryFId: null,
        categorySId: null,
        categoryTId: null,
        freeStatus: null,
        isValid: null,
        productId: null,
        brandId: null,
        status: null,
        salesCountMin: null,
        salesCountMax: null,
        marketPriceMin: null,
        marketPriceMax: null,
      },
      list: [],
    };
  },
  created() {
    this.getListCategory();
  },
  methods: {
    handleSelectedFree(item) {
      this.queryParams.freeStatus = item.value;
    },
    handleSelectedValid(item) {
      this.queryParams.isValid = item.value;
      alert(this.queryParams.isValid);
    },
    handleSecSort({ selectedOptions }) {
      this.fieldValue = selectedOptions.map((option) => option.label).join("/");
      if (selectedOptions && selectedOptions.length > 0) {
        this.queryParams.categoryFId = selectedOptions[0].id;
      }
      if (selectedOptions && selectedOptions.length === 2) {
        this.queryParams.categorySId = selectedOptions[1].id;
      }
      if (selectedOptions && selectedOptions.length === 3) {
        this.queryParams.categoryTId = selectedOptions[2].id;
      }
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.label).join("/");
      this.queryParams.categoryFId = selectedOptions[0].id;
      this.queryParams.categorySId = selectedOptions[1].id;
      this.queryParams.categoryTId = selectedOptions[2].id;
    },
    /** 查询分类列表 */
    async getListCategory() {
      // 执行查询
      const { data } = await categoryTreeSelect();
      this.categoryList = data;
      console.log(data);
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.fieldValue = ""),
        (this.cascaderValue = ""),
        (this.queryParams = {
          pageNo: 0,
          pageSize: 10,
          isAsc: false,
          columns: "createTime",
          name: null,
          categoryFId: null,
          categorySId: null,
          categoryTId: null,
          freeStatus: null,
          isValid: null,
          productId: null,
          brandId: null,
          status: null,
          salesCountMin: null,
          salesCountMax: null,
          marketPriceMin: null,
          marketPriceMax: null,
        });
      this.list = [];
      this.showSecPop = false;
      this.load_more();
    },
    handleSearch() {
      this.queryParams.pageNo = 0;
      this.list = [];
      this.load_more();
      this.showSecPop = false;
    },
    handleShowSearch() {
      this.showSearchPop = true;
    },
    clickOverlay() {
      this.showSearchPop = false;
    },
    handleSetSort(sortData) {
      this.queryParams.isAsc = sortData.isAsc;
      this.queryParams.columns = sortData.columns;
      this.list = [];
      this.queryParams.pageNo = 0;
      this.showSearchPop = false;
      this.load_more();
    },
    load_more: function () {
      this.queryParams.pageNo += 1;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      let sendData = this.queryParams;
      getSpuPage(sendData).then((res) => {
        let rows = res.data.list;
        if (rows == null || rows.length === 0) {
          this.loading = false; // 关闭加载状态
          this.finished = true; // 加载结束
          return;
        }
        this.loading = false; // 关闭加载状态
        this.total = res.data.total; //数据总条数
        this.list = this.list.concat(rows); //合并数组
        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.list.length >= this.total) {
          this.finished = true; // 加载结束
        }
      });
    },
    handleShowPop() {
      this.showSecPop = true;
    },
    onClickRight() {
      this.mgFlag = !this.mgFlag;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goDetail(e, item) {
      this.$router.push({
        name: "MProductDetail",
        query: {
          id: item.productId,
        },
      });
    },
    goBuy() {},
  },
};
</script>

<style lang="scss">
.product-collect-list-area {
  .top-fixed {
    position: fixed;
    width: 100%;
    z-index: 555;
  }
  .van-field__control {
    width: 100%;
    height: 44px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #efefef;
    font-size: 14px;
    padding: 0 6px;
    // overflow: hidden;
  }
  .van-cell {
    padding: 0;
    width: 100%;
  }
  .van-field__right-icon {
    position: absolute;
    right: 8px;
  }
  .op-area {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    background-color: #fff;
    .op-left {
      .iconfont {
        color: #999;
        margin: 0 0 0 2px;
      }
    }
  }
  .btm-area {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    border-top: 1px solid #efefef;
    display: flex;
    height: 49px;
    line-height: 49px;
    background: #ffffff;
    .btn-reset {
      text-align: center;
      flex: 1;
      font-size: 16px;
      color: #3875f6;
      cursor: pointer;
    }
    .btn-confirm {
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3875f6;
      flex: 1;
      cursor: pointer;
    }
  }
  .pop-tit {
    // position: fixed;
    width: 100%;
    background-color: #fff;
    padding: 22px 12px;
    height: 50px;
    overflow: hidden;
    border-radius: 8px;
    i {
      width: 3px;
      height: 15px;
      background: #3875f6;
      border-radius: 2px 2px 2px 2px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px 0 0;
    }
    .tit {
      font-weight: 700;
      font-size: 16px;
      color: #222222;
      line-height: 22px;
      text-align: left;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .input-style-form {
    padding: 0px 12px 22px 12px;
    .inner-form-area {
      padding: 16px 0 0 8px;
    }
    .form-item {
      margin: 0 0 20px 0;
      .label-ft {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        text-align: left;
        margin: 0 0 4px 0;
      }
      .label-input {
        width: 327px;
        height: 44px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #efefef;
        font-size: 14px;
        padding: 0 6px;
        overflow: hidden;
      }
      .date-picker {
        display: inline-block;
        position: relative;
        .label-input {
          width: 150px;
          height: 44px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #efefef;
        }
        .icon-date {
          position: absolute;
          right: 18px;
          top: 14px;
          display: inline-block;
          img {
            width: 14px;
            height: auto;
          }
        }
      }
    }
  }
  .item-sec-taglis {
    li {
      float: left;
      margin: 0 10px 10px 0;
    }
    .inner-tag-item {
      width: 101px;
      height: 38px;
      background: #f6f6f6;
      font-size: 14px;
      color: #222222;
      line-height: 38px;
      text-align: center;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #efefef;
      overflow: hidden;
    }
    .tag-item-active {
      display: inline-block;
      position: relative;
      .inner-tag-item {
        width: 101px;
        height: 38px;
        background: #f7faff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #3875f6;
        color: #3875f6;
      }
      .tangle {
        width: 18px;
        height: 16px;
        background: #3875f6;
        border-radius: 8px 0px 4px 0px;
        border: 1px solid #3875f6;
        position: absolute;
        right: 0px;
        bottom: 0px;
        text-align: center;
        .van-icon-success {
          margin: 2px 0 0 0;
        }
      }
    }
  }
  .step-number {
    position: absolute;
    right: 12px;
    bottom: 12px;
  }
  .tab-content {
    border-radius: 12px;
    border-radius: 12px;
    padding: 105px 0 0 0;
    // margin: 12px 0 0 0;
  }
  .list-con {
    padding: 0 12px;
  }
  li {
    margin-bottom: 10px;
    background: #fff;
    border-radius: 6px;
    .list-item {
      position: relative;
      padding: 12px 12px;
      min-height: 100px;
      .test-title {
        width: 250px;
        margin: 0;
        padding: 0 0 12px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .cate {
        font-size: 14px;
        font-weight: 700;
        color: #222;
      }
      .bottom-info-area {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
      }
      .list-sort {
        flex: 1;
        color: #666;
      }
      .add-cart-btn {
        width: 110px;
        height: 28px;
        display: block;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .img-txt-area {
    position: relative;
    padding-left: 84px;
    min-height: 72px;
    .text-con {
      color: #333;
      .type {
        font-size: 12px;
        color: #666;
        line-height: 20px;
        padding: 10px 0 6px 0;
      }
      .t-lf {
        color: #666;
      }
      .t-rt {
        color: #222;
      }
      .price {
        color: #f25353;
        font-size: 12px;
        em {
          font-weight: 700;
          font-style: normal;
          margin-right: 10px;
          color: #f25353;
        }
        del {
          color: #999;
          font-size: 20px;
          font-weight: normal;
        }
      }
    }
    .thumb {
      position: absolute;
      left: 0;
      top: 0;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }
    }
  }
}
</style>
